<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html>
<html lang="zh-CN">
<%
	pageContext.setAttribute("rootPath", request.getContextPath());
%>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<head>
<title>雇员信息</title>
<link
	href="${rootPath}/static/bootstrap-3.3.7-dist/css/bootstrap.min.css"
	rel="stylesheet">
<script src="${rootPath}/static/js/jquery-1.12.4.js"></script>
<script
	src="${rootPath}/static/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
</head>
<body>
	<div class="container">
		<!-- 标题 -->
		<div class="row">
			<div class="col-md-12 text-center">
				<h1>雇员信息</h1>
			</div>
		</div>
		<!-- 按钮 -->
		<div class="row">
			<div class="col-md-4 col-md-offset-8">
				<button type="button" class="btn btn-info">
					<span class="glyphicon glyphicon-plus" aria-hidden="true"></span>
					添加
				</button>
				<button type="button" class="btn btn-danger">
					<span class="glyphicon glyphicon-trash" aria-hidden="true"></span>
					删除
				</button>
			</div>
		</div>
		<div class="row">
			<div class="col-md-12">
				<table class="table table-hover table-condensed">
					<tr>
						<th>编号</th>
						<th>姓名</th>
						<th>性别</th>
						<th>邮件</th>
						<th>部门</th>
						<th>操作</th>
					</tr>
					<c:forEach items="${pageInfo.list}" var="emp">
						<tr>
							<td>${emp.empId}</td>
							<td>${emp.empName}</td>
							<td>${emp.gender == 'M' ? '男' : '女'}</td>
							<td>${emp.email}</td>
							<td>${emp.department.deptName}</td>
							<td>
								<button type="button" class="btn btn-primary btn-sm">
									<span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>
									编辑
								</button>
								<button type="button" class="btn btn-warning btn-sm">
									<span class="glyphicon glyphicon-remove" aria-hidden="true"></span>
									删除
								</button>
							</td>
						</tr>
					</c:forEach>
				</table>
			</div>

		</div>
		<div class="row">
			<!-- 分页文字信息 -->
			<div class="col-md-6">当前是第&nbsp;${pageInfo.pageNum}&nbsp;页，总共有&nbsp;${pageInfo.total}&nbsp;条，共&nbsp;${pageInfo.pages}&nbsp;页</div>
			<!-- 分页条 -->
			<div class="col-md-6">
				<nav aria-label="Page navigation">
					<ul class="pagination">
						<c:if test="${pageInfo.pageNum == 1}">
							<li><span><span aria-hidden="true">首页</span></span></li>
						</c:if>

						<c:if test="${!pageInfo.isFirstPage}">
							<li><span><a href="${rootPaht}/employee/employees">首页</a>
							</span></li>
						</c:if>

						<c:if test="${pageInfo.hasPreviousPage}">
							<li><a href="${rootPaht}/employee/employees?pageNum=${pageInfo.pageNum - 1}"><span
									aria-hidden="true">&laquo;</span></a></li>
						</c:if>

						<c:forEach items="${pageInfo.navigatepageNums}" var="pageNumber">
							<c:if test="${pageNumber == pageInfo.pageNum}">
								<li class="active"><a
									href="${rootPaht}/employee/employees?pageNum=${pageNumber}">${pageNumber}</a></li>
							</c:if>
							<c:if test="${pageNumber != pageInfo.pageNum}">
								<li><a
									href="${rootPaht}/employee/employees?pageNum=${pageNumber}">${pageNumber}</a></li>
							</c:if>
						</c:forEach>
						
						<c:if test="${pageInfo.hasNextPage}">
							<li><a
								href="${rootPaht}/employee/employees?pageNum=${pageInfo.pageNum + 1}"><span
									aria-hidden="true">&raquo;</span></a></li>
						</c:if>
						
						
						<c:if test="${!pageInfo.isLastPage}">
							<li><a
								href="${rootPaht}/employee/employees?pageNum=${pageInfo.pages}"><span>尾页</span></a></li>
						</c:if>

						<c:if test="${pageInfo.pageNum == pageInfo.pages}">
							<li><span>尾页</span></li>
						</c:if>

					</ul>
				</nav>
			</div>
		</div>
	</div>
</body>
</html>